<template>
  <div>
    <!-- 
      指令：以v-开头的标签属性就叫指令
        作用：给标签添加一些额外的功能
      
      v-bind: 
      作用： 动态设置标签属性值
      语法：
      v-bind:属性名="vue变量"
      简写：:属性名="vue变量"
     -->
    <a v-bind:href="hf">点我，跳转到百度</a>
    <img :src="imgSrc" />
    <img src="./assets/表情包.png" alt="" />
  </div>
</template>

<script>
// 使用本地图片的时候，必须先引入再绑定使用
import imgSrc from "./assets/表情包.png";
export default {
  data() {
    return {
      hf: "https://www.baidu.com",
      imgSrc: imgSrc,
      // imgSrc: "./assets/表情包.png",
    };
  },
};
</script>

<style>
</style>